"use client"
import React from "react"
import { Database, Edit, Plus, Search, Trash2 } from "lucide-react"
import { ColumnDef } from "@tanstack/react-table"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import DataTable from "@/components/ui/data-table"
import { cn } from "@/lib/utils"

type DataSource = {
  id: number
  name: string
  email: string
  role: string
  status: string
  lastLogin: string
}

const columns: ColumnDef<DataSource>[] = [
  {
    accessorKey: "name",
    header: "用户",
    cell: ({ row }) => {
      const name = row.getValue<string>("name")

      return (
        <div className="flex items-center">
          <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center mr-3">
            <span className="text-white text-xs font-medium">{name.charAt(0)}</span>
          </div>
          <span className="text-gray-900 dark:text-white">{name}</span>
        </div>
      )
    }
  },
  {
    accessorKey: "email",
    header: "邮箱"
  },
  {
    accessorKey: "role",
    header: "角色"
  },
  {
    accessorKey: "status",
    header: "状态",
    cell: ({ row }) => {
      const status = row.getValue<string>("status")

      return (
        <div>
          <span
            className={cn(
              "px-2 py-1 rounded-full text-xs",
              status === "活跃"
                ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
                : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
            )}
          >
            {status}
          </span>
        </div>
      )
    }
  },
  {
    accessorKey: "lastLogin",
    header: "最后登录"
  },
  {
    accessorKey: "actions",
    header: "操作",
    cell: () => {
      return (
        <div className="flex space-x-2">
          <Button variant="ghost" size="sm">
            <Edit className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="sm">
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>
      )
    }
  }
]

// 模拟数据源列表
const data: DataSource[] = [
  { id: 1, name: "张三", email: "zhangsan@example.com", role: "管理员", status: "活跃", lastLogin: "2023-06-15" },
  { id: 2, name: "李四", email: "lisi@example.com", role: "开发者", status: "活跃", lastLogin: "2023-06-14" },
  { id: 3, name: "王五", email: "wangwu@example.com", role: "分析师", status: "离线", lastLogin: "2023-06-10" },
  { id: 4, name: "赵六", email: "zhaoliu@example.com", role: "开发者", status: "活跃", lastLogin: "2023-06-12" }
]

/**
 * 用户管理页面
 */
const UsersManagementPage = () => {
  return (
    <div>
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-text-primary mb-2">用户管理</h2>
        <p className="text-text-secondary">管理系统用户和权限</p>
      </div>

      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
        <div className="relative w-full md:w-80">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
          <Input placeholder="搜索用户..." className="pl-10 bg-white" />
        </div>
        <div className="flex space-x-2">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            添加用户
          </Button>
        </div>
      </div>

      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Database className="mr-2 h-5 w-5" />
            数据源列表
          </CardTitle>
        </CardHeader>
        <CardContent>
          <DataTable data={data} columns={columns} />
        </CardContent>
      </Card>
    </div>
  )
}

export default UsersManagementPage
